import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { IconX } from '@/rcomponents/iconx';
import { Button, Modal, Flex, Toast } from '@ant-design/react-native';
import RackMaterialStore from './rackMaterialStore';
import RnBarcodeScanner from './rnBarcodeScanner';

const styles = StyleSheet.create({
  personInfo: {
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  personText: {
    marginLeft: 10,
    fontSize: 16,
  },
  scanBtnView: { alignItems: 'center', flexDirection: 'row' },
});
export default function ShipRequesterScan({
  requesterType = '领料人',
  scanIconSize = 28,
  onScanned,
}) {
  const rackmatStore = RackMaterialStore.useStore();
  const [scanVisible, setScanVisible] = useState(false);
  const { shipRequester } = rackmatStore;
  if (shipRequester.tid) {
    return (
      <Flex style={styles.personInfo}>
        <IconX origin="FONTAWESOME" name="user-circle-o" size={32} />
        <View>
          <Text style={styles.personText}>{shipRequester.name}</Text>
          {!!shipRequester.department && (
            <Text style={styles.personText}>{shipRequester.department}</Text>
          )}
        </View>
      </Flex>
    );
  }
  return (
    <View>
      <Button
        onPress={() => {
          setScanVisible(true);
          /*
          navigation.navigate(BarcodeScanPage.routeName, {
            parentRoute: routeName,
          });
          */
        }}
      >
        <View style={styles.scanBtnView}>
          <IconX
            origin="MATERIALCOMMUNITY"
            name="barcode-scan"
            size={scanIconSize}
          />
          <Text style={styles.personText}>扫码识别{requesterType}</Text>
        </View>
      </Button>
      <Modal
        visible={scanVisible}
        onClose={() => {
          setScanVisible(false);
        }}
      >
        <RnBarcodeScanner
          scanProcessing={rackmatStore.getShipRequester.loading}
          onBarCodeRead={async (barcode) => {
            const error = await rackmatStore.getShipRequester(barcode);
            if (error) {
              Toast.fail(`条码获取${requesterType}信息失败, 请重试`);
            } else if (onScanned) {
              onScanned(barcode);
            }
            setScanVisible(false);
          }}
          onExitScan={() => {
            setScanVisible(false);
          }}
        />
      </Modal>
    </View>
  );
}
